<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
  function jsonpReceive(data) {
    console.log(data)
  }
  </script>
  <script src="https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8&notice=0&format=jsonp&platform=h5&uin=0&needNewCode=1&jsonpCallback=jsonpReceive"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  $.ajax({
    dataType: 'jsonP',
    url: 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
    data:{
      g_tk: 1928093487,
        inCharset: 'utf-8',
        outCharset: 'utf-8',
        notice: 0,
        format: 'jsonp',
        platform: 'h5',
        uin: 0,
        needNewCode: 1
    },
    jsonp: 'jsonpCallback', //告诉后端 我预先定义好的方法名，
    //通过 jsonpcallback 这个字段传给他
    success: function(json) {
      console.log('jq receive',json);
    },error: function(){
      console.log('fail');
    }
  })
</script>
<script>
  function ajaxJsonp(option) {
    const { url,data,jsonp,success,error} = option;
    const methodName = `ajaxJsonp${new Date().getTime()}`;
    //方法
    window [methodName] = function(data) {
      success(data);
    }
    let keyValMap = Object.keys(data).map(key => {
      return `${key}=${data[key]}`
    })
    console.log('keyValMap',keyValMap);
    //插入script
     let scriptNode = document.createElement('script');
     scriptNode.src = url + '?' + keyValMap.join('&') + `&${jsomp}=${methodName}`;
     document.body.appendChild(scriptNode);
     scriptNode.onerror = function(err){
       error(err);
     }
  }
</script>
<script>
    ajaxJsonp({
      dataType: 'jsonP',
      url: 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
      data:{
        g_tk: 1928093487,
          inCharset: 'utf-8',
          outCharset: 'utf-8',
          notice: 0,
          format: 'jsonp',
          platform: 'h5',
          uin: 0,
          needNewCode: 1
      },
      jsonp: 'jsonpCallback', //告诉后端 我预先定义好的方法名，
      //通过 jsonpcallback 这个字段传给他
      success: function(json) {
        console.log('jq receive',json);
      },error: function(){
        console.log('fail');
      }
    })
  </script>
</body>
</html>